<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-box"></i> 商品管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    class="handle-del mr10"
                    style="display:block;margin-bottom:15px;"
                    @click="addVisible = true"
                >新增商品</el-button>
                <el-select v-model="id" placeholder="请选择店铺" @change="changeShop">
                    <el-option
                    v-for="item in shops"
                    :key="item.storeId"
                    :label="item.storeName"
                    :value="item.storeId">
                    </el-option>
                </el-select>
                <el-input
                    placeholder="请输入搜索商品名称"
                    v-model="name"
                    style="width:150px;margin-left:40px"
                    clearable>
                </el-input>
                <el-button type="primary" icon="el-icon-search" style="margin-left:10px" @click="search" circle></el-button>
                <el-button type="success" icon="el-icon-refresh" @click="clear" circle></el-button>
            </div>
            <el-table
                :data="products"
                border
                style="width: 100%;margin-top:28px;">
                <el-table-column
                prop="commodityId"
                label="商品ID"
                width="110">
                </el-table-column>
                <el-table-column
                prop="commodityName"
                label="商品名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="commodityImg"
                label="商品图片">
                    <template slot-scope="scope">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="'/public/download?fileName='+scope.row.commodityImg"
                        fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                prop="commodityPrice"
                label="商品价格（￥）">
                </el-table-column>
                <el-table-column
                prop="commodityStock"
                label="商品库存">
                </el-table-column>
                <el-table-column
                prop="commoditySales"
                label="商品已售数">
                </el-table-column>
                <el-table-column
                prop="commodityContent"
                label="商品描述">
                </el-table-column>
                <el-table-column label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="showUpdate(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-view"
                            style="color:blue"
                            @click="showComment(scope.$index, scope.row)"
                        >查看评论</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="del(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="添加" :visible.sync="addVisible" width="50%">
            <el-form ref="form" :model="addForm" label-width="100px">
                <el-form-item label="商品名字">
                    <el-input v-model="addForm.commodityName"></el-input>
                </el-form-item>
                <el-form-item label="商品价格（￥）">
                    <el-input v-model="addForm.commodityPrice"></el-input>
                </el-form-item>
                <el-form-item label="商品库存">
                    <el-input v-model="addForm.commodityStock"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="addForm.commodityContent"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload
                        style="text-align:center;margin-top:20px"
                        ref="upload"
                        action="/admin/commodity/insert"
                        :limit="1"
                        name="img"
                        :on-success="handleAvatarSuccess"
                        with-credentials
                        list-type="picture"
                        :data="addForm"
                        :auto-upload="false"
                        :on-exceed="exceed">
                        <el-button  type="success">上传图片</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">添 加</el-button>
            </span>
        </el-dialog>


        <!-- 更新弹出框 -->
        <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
            <el-form ref="form" :model="updateForm" label-width="70px">
                <el-form-item label="商品名字">
                    <el-input v-model="updateForm.commodityName"></el-input>
                </el-form-item>
                <el-form-item label="商品价格（￥）">
                    <el-input v-model="updateForm.commodityPrice"></el-input>
                </el-form-item>
                <el-form-item label="商品库存">
                    <el-input v-model="updateForm.commodityStock"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="updateForm.commodityContent"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload
                        style="text-align:center;margin-top:20px"
                        ref="updateUpload"
                        action="/admin/commodity/update"
                        :limit="1"
                        name="img"
                        :on-success="handleUpdateSuccess"
                        with-credentials
                        list-type="picture"
                        :data="datas"
                        :auto-upload="false"
                        :on-exceed="exceed">
                        <el-button  type="success">上传图片</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">更 新</el-button>
            </span>
        </el-dialog>

        <!-- 评论弹出框 -->
        <el-dialog title="商品评论" :visible.sync="commentVisible" width="60%">
            <el-table
                :data="comments"
                border
                style="width: 100%;margin-top:28px;">
                <el-table-column
                prop="commentId"
                label="评论ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="commentContent"
                label="评论内容"
                width="180">
                </el-table-column>
                <el-table-column
                prop="commentSpeedScore"
                label="配送评分"
                width="180">
                    <template slot-scope="scope">
                        <el-rate
                        disabled
                        v-model="scope.row.commentSpeedScore">
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                prop="commentCommodityScore"
                label="商品质量评分"
                width="180">
                    <template slot-scope="scope">
                        <el-rate
                        disabled
                        v-model="scope.row.commentCommodityScore">
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                prop="commentServeScore"
                label="服务评分"
                width="180">
                    <template slot-scope="scope">
                        <el-rate
                        disabled
                        v-model="scope.row.commentServeScore">
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                prop="commentUserId"
                label="评论用户ID"
                width="180">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="delcomment(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>
<script>
import {getShops,getProducts,delProduct,getComments,delComment} from '@/api'

export default {
    data () {
        return {
            products: [],
            comments: [],
            id: '',
            name: '',
            datas: {commodityName: '',commodityPrice: '',commodityStock: '',commodityContent: '',commodityId: ''},
            shops: [],
            addVisible: false,
            addForm: {},
            updateForm: {},
            updateVisible: false,
            commentVisible: false,
        }
    },
    methods: {
        showComment(index,row){
            getComments(row.commodityId).then(res =>{
                this.comments = res.data
                this.commentVisible = true
            })
        },
        delcomment(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let fromData = new FormData()
                fromData.append('id', this.comments[index].commentId)
                delComment(fromData).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.comments.splice(index, 1)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
            })
            .catch(() => {});
        },
        exceed(){
            this.$message({
                type: 'error',
                message: '超过上传图片'
            })  
        },
        handleAvatarSuccess(res){
            if(res.code == 0){
                this.$refs.upload.clearFiles()
                this.$message({
                    type: 'success',
                    message: '添加成功'
                })
                this.addVisible = false
                this.getProducts(this.id)
            }else{
                this.$refs.upload.clearFiles()
                this.$message({
                    type: 'error',
                    message: '添加失败'
                })
            }
        },
        handleUpdateSuccess(res){
            if(res.code == 0){
                this.$refs.updateUpload.clearFiles()
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                this.updateVisible = false
                this.getProducts(this.id)
            }else{
                this.$refs.updateUpload.clearFiles()
                this.$message({
                    type: 'error',
                    message: '修改失败'
                })
            }
        },
        search(){
            if(this.id == ''){
                this.$message({
                    type: 'error',
                    message: '未选择店铺'
                })
                return
            }
            getProducts(this.id,this.name).then(res => {
                this.products = res.data
            })
        },
        add(){
            if(this.id == ''){
                this.$message({
                    type: 'error',
                    message: '没有选择店铺'
                })
                return
            }
            this.$refs['upload'].submit()
        },
        clear(){
            this.name = ''
            getProducts(this.id).then(res => {
                this.products = res.data
            })
        },
        getShops(){
            getShops().then(res => {
                this.shops = res.data
            })
        },
        getProducts(id,name){
            getProducts(id,name).then(res => {
                this.products = res.data
            })
        },
        changeShop(e){
            this.getProducts(e)
            this.addForm.commodityStoreId = e
        },
        showUpdate (index, row) {
            this.idx = index
            this.updateForm = row
            this.updateVisible = true
        },
        update(){
            this.datas.commodityName = this.updateForm.commodityName
            this.datas.commodityPrice = this.updateForm.commodityPrice
            this.datas.commodityStock = this.updateForm.commodityStock
            this.datas.commodityContent = this.updateForm.commodityContent
            this.datas.commodityId = this.updateForm.commodityId
            console.log(this.datas)
            this.$refs['updateUpload'].submit()
        },
        del (index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let fromData = new FormData()
                fromData.append('commodityId', this.products[index].commodityId)
                delProduct(fromData).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.products.splice(index, 1)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
            })
            .catch(() => {});
        }
    },
    mounted () {
        this.getShops()
    }
}
</script>
<style scoped>
.red {
    color: red;
}
</style>